<template>
  <div class="df fdc jcsb f1 h0">
    <div class="f1 h0 df fdc">
      <el-form>
        <el-form-item class="mt20">
          <div class="df aic w100">
            <div style="width: 50%" class="mr20">
              <el-input
                v-model="searchIpt"
                placeholder="请输入用户昵称，手机号进行搜索"
              ></el-input>
            </div>
            <el-button @click="search">搜索</el-button>
          </div>
        </el-form-item>
      </el-form>
      <el-table
        class="f1"
        row-key="id"
        :expand-row-keys="rowKeys"
        :data="tableData"
      >
        <el-table-column type="expand">
          <template #default="scope">
            <el-tabs @click.stop v-model="scope.row.active">
              <el-tab-pane label="爬虫结果" name="first">
                <el-input
                  :rows="6"
                  v-model="scope.row.content"
                  type="textarea"
                ></el-input>
              </el-tab-pane>
              <el-tab-pane label="速读结果" name="second">
                <el-input
                  :rows="6"
                  v-model="scope.row.summary"
                  type="textarea"
                ></el-input>
              </el-tab-pane>
              <el-tab-pane label="实体提取结果" name="third">
                <el-input
                  :rows="6"
                  v-model="scope.row.entity"
                  type="textarea"
                ></el-input>
              </el-tab-pane>
            </el-tabs>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="nickname" label="上传用户"></el-table-column>
        <el-table-column
          prop="created_at_text"
          label="上传时间"
        ></el-table-column>
        <el-table-column label="爬虫处理结果"></el-table-column>
        <el-table-column label="喵灵处理结果"></el-table-column>
        <el-table-column prop="web_site" label="来源渠道"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        class="mt20"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { knowledgeList } from "@/apis/content";
import { transDate } from "@/utils/transforDate";

const tableData = ref([1]);
const pageSize = ref(10);
const currentPage = ref(1);
const total = ref(0);
const rowKeys = ref([]);
const searchIpt = ref("");

const handleSizeChange = (e) => {
  getData();
};

const handleCurrentChange = (e) => {
  getData();
};

const getData = async (q) => {
  let data = {};
  data.page = currentPage.value;
  data.page_size = pageSize.value;
  if (q) {
    data.q = q;
  }
  try {
    let res_list = await knowledgeList(data);
    tableData.value = res_list.data.data.items;
    total.value = res_list.data.data.total;
    tableData.value = tableData.value.map((item) => {
      item.active = "first";
      item.created_at_text = transDate(item.created_at);
      item.is_deal
        ? (item.is_deal_text = "未完成")
        : (item.is_deal_text = "已完成");
      return item;
    });
  } catch (e) {
    console.log(e);
  }
};

onMounted(() => {
  getData();
});
const search = () => {
  if (searchIpt.value) {
    getData(searchIpt.value);
  } else {
    getData();
  }
};
</script>

<style lang="scss" scoped>
.el-button:focus {
  outline: none !important;
}

:deep(.el-table__body) {
  height: 100%;
}
</style>
